<template>
  <div class="upload-container">
    <div class="upload-box">
      <!-- 随便一个赋值给 action 禁用 action 提交 -->
      <el-upload
        class="upload-demo"
        drag
        action="doSome"
        multiple
        :before-upload="beforeUpload"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <!-- 确认上传 -->
      <div class="confirm">
        <el-row>
          <el-button @click="confirmUpload">确认上传</el-button>
        </el-row>
      </div>
      <!-- 显示上传的文件 -->
      <div class="showFile" v-if="flag">
        <!-- <i class="el-icon-document"></i> -->
        <i :class="icon"></i>
        <span class="file-name">{{ fileList.name }}</span>
      </div>
      <!-- 进度条 -->
      <div class="showProgress">
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="percent"
          v-if="showProgress"
        ></el-progress>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fileList: "",
      //控制页面文件的显隐
      flag: false,
      //控制进度条的显隐
      showProgress: false,
      icon: "",
      percent: 0,
    };
  },

  methods: {
    beforeUpload(file) {
      let extArr = [
        {
          ext: ["txt"],
          iconClass: "el-icon-document",
        },
        {
          ext: ["jpg", "png"],
          iconClass: "el-icon-picture",
        },
      ];

      let extNameArr = file.name.split(".");

      let ext_name = extNameArr[extNameArr.length - 1];

      extArr.forEach((item) => {
        item.ext.some((value) => {
          if (value === ext_name) {
            this.icon = item.iconClass;
            return true;
          }
        });
      });

      this.fileList = file;
      this.flag = true;
      return false;
    },

    //确认上传
    async confirmUpload() {
      console.log(this.fileList);
      if (typeof this.fileList != "object") {
        return this.$message({ type: "error", message: "请选择文件" });
      }
      //控制页面上文件的显隐
      this.flag = false;
      //控制进度条的显示隐藏
      this.showProgress = true;
      let fd = new FormData();
      fd.append("file", this.fileList);
      let _this = this;
      axios({
        url: "http://192.168.10.127:3001/upload",
        method: "post",
        data: fd,
        onUploadProgress(processEvent) {
          _this.percent = Math.ceil(
            (processEvent.loaded / processEvent.total) * 100
          );
          // console.log(`上传:${complete}`);
          // console.log(`percent:${_this.percent}`);
        },
      })
        .then((res) => {
          // console.log(res);
          let { data } = res;
          if (data.status == 200) {
            this.showProgress = false;
            this.percent = 0;
            return this.$message({ type: "success", message: "上传成功" });
          }

          this.$message({ type: "error", message: "上传失败" });
        })
        .catch((error) => console.log(error));

      // let { data: result } = await axios.post(
      //   "http://192.168.10.127:3001/upload",
      //   fd
      // );
      // if (result.status === 200) {
      //   this.$message({
      //     type: "success",
      //     message: "上传成功",
      //   });
      // } else {
      //   this.$message({
      //     type: "error",
      //     message: "上传失败",
      //   });
      // }
      this.fileList = "";
    },
  },
};
</script>

<style scoped>
.upload-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 270px;
}

.upload-box .confirm {
  position: absolute;
  bottom: 92px;
  right: 65px;
}

.showFile {
  width: 570px;
  height: 50px;
  color: #90b0d7;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.file-name {
  margin-left: 10px;
}

.showProgress {
  margin-top: 20px;
}
</style>